<template>
    <f7-page class="common-page">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>人员信息</f7-nav-title>
            <f7-nav-right> </f7-nav-right>
        </f7-navbar>
        <div class="hear-bg"></div>
        <div class="content-box">
            <div class="content-box-top">
                <div class="avatar" v-if="!models.model.mngAttachmentId">
                    {{ models.model.personName ? models.model.personName.substr(models.model.personName.length - 1, 1) :
                    "--" }}
                </div>
                <img :src="$util.getImgSrc(models.model.mngAttachmentId)" class="avatar" alt="" v-else />
                <div class="right-box">
                    <div class="title-box">
                        <h3>
                            {{ models.model.personName }}
                        </h3>
                    </div>
                    <p>{{ models.model.orgName || "--" }}</p>
                </div>
            </div>
            <div class="content-box-bottom">
                <div class="bottom-item">
                    <span class="key">联系方式</span>
                    <span class="value">{{ models.model.personMobile || "--" }}</span>
                    <img v-if="models.model.personMobile" src="../../../../../assets/img/qzjx/mobile/icon_tel.png"
                        alt="" width="24" @click="call(models.model.personMobile)" />
                </div>
                <div class="bottom-item">
                    <span class="key">身份证号</span>
                    <span class="value">{{ models.model.personIdcard || "--" }}</span>
                </div>
            </div>
        </div>
        <div class="cer-info">
            <div class="title">证书信息</div>
            <div class="cer-content">
                <p class="cer-title">设备管理员</p>
                <div class="cer-details">
                    <div class="cer-details-left">
                        <p>
                            <span class="key">证书类型</span>
                            <span class="value">{{ models.mobileManagerCert.operationTypeName || "--" }}</span>
                        </p>
                        <p>
                            <span class="key">证件编号</span>
                            <span class="value">{{ models.mobileManagerCert.certCode || "--" }}</span>
                        </p>
                        <p>
                            <span class="key">发证机关</span>
                            <span class="value">{{ models.mobileManagerCert.certStand || "--" }}</span>
                        </p>
                        <p>
                            <span class="key">发证日期</span>
                            <span class="value">{{ models.mobileManagerCert.grantDate || "--" }}</span>
                        </p>
                        <p>
                            <span class="key">证件有效期</span>
                            <span class="value">{{ models.mobileManagerCert.certEndDate || "--" }}</span>
                        </p>
                    </div>
                    <div class="cer-details-right">
                        <img  v-if="models.mobileManagerCert.certAttachmentId" :src="$util.getImgSrc(models.mobileManagerCert.certAttachmentId)"
                            @click="previewImg($util.getImgSrc(models.mobileManagerCert.certAttachmentId))" alt="" />
                    </div>
                </div>
            </div>
        </div>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/workflowController";
import { ImagePreview } from 'vant';

export default class instance extends controller {
    onBeforeInit() {
        this.urls = {
            model: '/equipment/eqmMobileManager/getEntity'
        };
    }
    mixin() {
        return {
            data() {
                return {
                    models: {
                        model: {},
                        mobileManagerCert: {}
                    }
                };
            },
            methods: {
                // 拨打电话
                call(mobile) {
                    if (mobile && window.plus) {
                        window.plus.device.dial(mobile);
                    }
                },
                previewImg(url) {
                    ImagePreview({
                        images: [url],
                        closeable: true
                    });
                }
            },
        };
    }
}
</script>

<style lang="less" scoped>
.hear-bg {
    position: absolute;
    top: 44px;
    width: 100%;
    background: linear-gradient(180deg, #1990ff 0%, rgba(25, 144, 255, 0) 100%);
    height: 92px;
}

.content-box {
    position: relative;
    padding: 15px;
    margin: 10px 16px 10px;
    font-size: 13px;
    background: linear-gradient(196deg, #eff6ff 0%, #ffffff 100%);
    box-shadow: 0px 3px 8px 0px rgba(165, 201, 255, 0.1);
    border-radius: 8px;

    .content-box-top {
        display: flex;
        align-items: flex-start;

        .avatar {
            object-fit: cover;
            margin-right: 9px;
            width: 49px;
            height: 49px;
            text-align: center;
            line-height: 49px;
            background: #eef5fe;
            color: #158fff;
            border-radius: 49px;
            font-size: 20px;
        }

        .right-box {
            word-break: break-all;
            flex: 1;
            margin-left: 10px;

            .title-box {
                display: flex;
                justify-content: space-between;
                align-items: center;

                h3 {
                    color: #242424;
                    font-size: 16px;
                    flex: 1;
                    margin: 5px 0 10px;
                }

                .status {
                    font-size: 13px;
                    color: #61677a;
                }

                .status-yellow {
                    color: #ff9f24;
                }
            }

            span {
                flex-shrink: 0;

                &.tag.tag-fill {
                    background: rgba(115, 125, 138, 0.1);
                    color: #61677a;
                    border: none;
                }

                &.tag.tag-yellow {
                    background: #fef7ee;
                    color: #ff9534;
                    border: none;
                }
            }

            p {
                color: #8995ac;
                font-size: 13px;
                margin: 0;
            }
        }
    }

    .content-box-bottom {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #e9ecf0;

        .bottom-item {
            position: relative;
            font-size: 13px;

            .key {
                display: inline-block;
                width: 75px;
                color: #737d8a;
            }

            .value {
                color: #333333;
            }

            img {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }

            +.bottom-item {
                margin-top: 10px;
            }
        }
    }
}

.cer-info {
    padding: 15px 15px 10px;
    margin: 10px 16px;
    font-size: 13px;
    box-shadow: 0px 3px 8px 0px rgba(165, 201, 255, 0.1);
    border-radius: 8px;
    background: #fff;

    .title {
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        position: relative;
        padding-left: 10px;
        height: 25px;
        line-height: 25px;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            width: 3.5px;
            height: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: #1990ff;
        }
    }

    .cer-content {
        p {
            margin: 0;
        }

        .cer-title {
            font-size: 16px;
            font-weight: 500;
            color: #242424;
            margin: 16px 0 0;
        }

        .cer-details {
            display: flex;
            align-items: center;

            .cer-details-left {
                flex: 1;

                p {
                    display: flex;
                    font-size: 13px;
                    margin-top: 10px;

                    .key {
                        display: inline-block;
                        width: 75px;
                        color: #737d8a;
                    }

                    .value {
                        flex: 1;
                        color: #333333;
                    }
                }
            }

            .cer-details-right {
                width: 94px;
                height: 138px;
                margin-left: 16px;

                img {
                    width: 100%;
                    height: 100%;
                }

                // /deep/ .pic_upload {
                //     padding: 0;
                //     margin: 0;

                //     .img-div {
                //         width: 94px;
                //         height: 138px;
                //     }
                // }
            }
        }
    }
}
</style>
